<template>
  <section class="citys clearfix">
    <span
      class="text-overflow"
      v-for="(item, index) in citys"
      :class="{'active': city.placeCode === item.placeCode}"
      :key="item.placeCode"
      :title="item.placeName"
      @click.stop="selectCity(item)"
    >{{ item.placeName }}</span>

    <i class="el-icon-caret-top" :style="{ left: `${caretLeft}px`}"></i>
  </section>
</template>

<script>
  export default {
    props: ['current', 'citys', 'city'],
    data () {
      return {}
    },

    methods: {
      selectCity (city) {
        if (city.placeCode !== this.city.placeCode) {
          this.$emit('cityChange', city)
        }
      }
    },
    computed: {
      caretLeft () {
        return (this.current % 6) * 80
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../element-variables";
  .citys {
    width: 100%;
    padding: 16px 0 8px;
    position: relative;

    .el-icon-caret-top {
      position: absolute;
      top: -10px;
      color: #f5f5f5;
      transform: translateX(50%);
    }

    span {
      width: 75px;
      float: left;
      margin-bottom: 15px;
      padding-right: 8px;
      cursor: pointer;

      &:hover,
      &.active {
        color: $--color-primary;
      }
    }
  }

</style>
